<template>
    <div class="main">
        <div>
            <div>
            <img src="@/assets/images/gif_404.gif" alt="404">
        </div>
        <div>
            <div style="margin-left: 100px;margin-top: 60px">
                <h1 class="color-main">OOPS!</h1>
                <h2 style="color: #606266">很抱歉，页面它不小心迷路了！</h2>
                <div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
                <a-button style="margin-top: 20px" type="primary" round @click="handleGoMain">返回首页</a-button>
            </div>
        </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
let $router = useRouter()
let handleGoMain = () => {
    $router.push({ path: '/' })
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 800px;
    }
}
</style>